
<!-- 旧版本，里面有一键登录 的代码。 -->
<template>
	<view class="pages" :class="themeName">
		<!-- #ifndef  H5 -->

		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
			<u-navbar :is-back="true" title="登录" :title-bold="true" :is-fixed="false" :border-bottom="false"
				:background="{ background: 'rgba(256,256, 256,0)' }"></u-navbar>
		</u-sticky>
		<!-- #endif -->
		
		
		<view class="login">
			<view class="login-box">
				<image class="logo" :src="appConfig.logo" mode="heightFix"></image>
				<!-- start 一键登录  -->
				<view v-if="!phoneLogin">
					<!-- 一键登录Start -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="login-btn white login-btn-user" v-if="isMnpWxAuth" @tap="mnpLogin">
						用户一键登录
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button class="login-btn white login-btn-user" v-if="isOaWxAuth && isWeixin" @tap="getCodeUrl">
						用户一键登录
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button class="login-btn white login-btn-user" v-if="isAPPWxAuth" @tap="appLogin">
						用户一键登录
					</button>
					<!-- #endif -->
					<!-- 字节登录 -->
					<!-- #ifdef MP-TOUTIAO -->
					<button class="login-btn white login-btn-user" v-if="isToutiaoAuth" @tap="ttLogin">
						用户一键登录
					</button>
					<!-- #endif  -->
					<!-- 一键登录End -->
					<button class="login-btn white login-btn-mobile" @click="phoneLogin = !phoneLogin">
						手机号登录
					</button>
				</view>
				<!-- End 一键登录 -->
			</view>
			
			
			<!-- start 这部分是 账号登录，手机验证码登录 -->
			<view v-if="phoneLogin">
				<view class="input m-t-40">
					<u-field label-width="0" v-model="account" placeholder="请输入手机号" :border-bottom="false"
						:style="{ width: '100%' }" type="number" />
				</view>
				<view class="input m-t-40" v-if="loginType == 1">
					<u-field label-width="0" v-model="password" type="password" :password-icon="false"
						placeholder="请输入密码" :border-bottom="false">
						<view class="forget-btn p-l-20" slot="right">
							<router-link to="/pages/forget_pwd/forget_pwd">
								忘记密码?
							</router-link>
						</view>
					</u-field>
				</view>
				<view class="input m-t-40" v-if="loginType == 2">
					<u-field label-width="0" v-model="code" placeholder="请输入验证码" :border-bottom="false" type="number">
						<view slot="right">
							<view class="sms-btn p-l-20" @tap="sendSMS">
								<!-- 获取验证码 -->
								<u-verification-code unique-key="login" ref="uCode" @change="codeChange">
								</u-verification-code>
								<view class="xs" :class="{
                    disabled: codeTips == '获取验证码' && account.length !== 11,
                  }">{{ codeTips }}</view>
							</view>
						</view>
					</u-field>
				</view>
			</view>
			<!-- end 这部分是 账号登录，手机验证码登录 -->
			<view class="m-t-40">
				<u-checkbox v-model="isAgree" :active-color="themeColor" shape="circle" :label-disabled="true">
					<view class="sm flex">
						已阅读并同意
						<router-link data-theme="" to="/pagesUser/pages/server_explan/server_explan?type=1">
							<view class="agreement">《{{ AgreemenName || "服务协议" }}》</view>
						</router-link>
						和
						<router-link to="/pagesUser/pages/server_explan/server_explan?type=2">
							<view class="agreement">《{{ AgreemenUserName || "隐私协议" }}》</view>
						</router-link>
					</view>
				</u-checkbox>
			</view>
			<!-- @click="showModel = true" -->
			<view v-if="phoneLogin">
				<button class="login-btn white login-btn-user" @tap="loginFun" :class="{ disabled: isDisabled }">
					登录
				</button>
				<view class="m-t-40 flex row-between">
					<view v-show="appConfig.login_way.length != 1">
						<span> 已有账号，使用</span>
						<span class="agreement" @tap="changeLoginType"
							v-if="hasLoginWay(2) && loginType == 2">密码登录</span>
						<span class="agreement" @tap="changeLoginType"
							v-if="hasLoginWay(1) && loginType == 1">验证码登录</span>
					</view>
					<view :style="{
              'margin-left': 'auto',
            }">
						<router-link to="/pages/register/register" v-if="isPhoneRegister">注册账号
						</router-link>
					</view>
				</view>
			</view>
		</view>
		<u-modal :value="showModel" show-cancel-button :show-title="false"
			@confirm="(isAgree = true), (showModel = false)" @cancel="showModel = false" :confirm-color="themeColor">
			<view class="comfirm-box">
				<view> 请先阅读并同意 </view>
				<view class="flex row-center">
					<router-link data-theme="" to="/bundle/pages/server_explan/server_explan?type=1">
						<view class="agreement">《{{ AgreemenName || "服务协议" }}》</view>
					</router-link>
					和
					<router-link to="/bundle/pages/server_explan/server_explan?type=2">
						<view class="agreement">《{{ AgreemenUserName || "隐私协议" }}》</view>
					</router-link>
				</view>
			</view>
		</u-modal>
		<!-- #ifdef MP-WEIXIN -->
		<mplogin-popup v-model="showLoginPop" :logo="appConfig.logo" :title="appConfig.shop_name"
			:login-data="loginData" @close="closePopup" @update="handleSubmitInfo" />
		<!--  #endif -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	import {
		apiAuthLogin,
		apiAccountLogin,
		apiLoginCaptcha,
		apiToutiaoAuthLogin,
		apiAppWxLogin,
		apiUpdateUser,
		apiCheckMobile,
	} from "@/api/app";
	import wechath5 from "@/utils/wechath5";
	import {
		isWeixinClient,
		currentPage,
		client,
		trottle
	} from "@/utils/tools";
	import Cache from "@/utils/cache";
	import {
		BACK_URL,
		INVITE_CODE
	} from "@/config/cachekey";
	import {
		getCode,
		getUserProfile
	} from "@/utils/login";
	import {
		apiPolicyAgreement
	} from "@/api/app";

	const loginType = {
		ACCOUNT: 1,
		SMS_CODE: 2,
	};
	export default {
		data() {
			return {
				password: "",
				account: "",
				code: "",
				loginType: "",
				isWeixin: "",
				codeTips: "",
				showLoginPop: false,
				loginData: {},
				isAgree: false,
				showModel: false,
				phoneLogin: true,
				AgreemenName: "",
				AgreemenUserName: "",
			};
		},

		methods: {
			...mapMutations(["login"]),
			...mapActions(["getUser"]),
			// 获取服务协议
			getPolicyAgreement() {
				apiPolicyAgreement({
					type: 1,
				}).then((res) => {
					this.AgreemenName = res.name;
				});
				apiPolicyAgreement({
					type: 2,
				}).then((res) => {
					this.AgreemenUserName = res.name;
				});
			},
			// 小程序微信登录
			async mnpLogin() {
				if (!this.isAgree) {
					this.showModel = true;

					return;
				}
				const {
					userInfo: {
						avatarUrl,
						nickName,
						gender
					},
				} = await getUserProfile();
				uni.showLoading({
					title: "登录中...",
					mask: true,
				});
				const wxCode = await getCode();
				const data = await apiAuthLogin({
					code: wxCode,
					nickname: nickName,
					headimgurl: avatarUrl,
				});
				if (data.is_new_user) {
					uni.hideLoading();
					this.showLoginPop = true;
					this.loginData = data;
				} else {
					this.loginHandle(data);
				}
				// this.loginHandle(data)
			},
			getCodeUrl() {
				if (!this.isAgree) {
					// this.$toast({ title: "请阅读并同意《服务协议》《隐私协议》" });
					this.showModel = true;

					return;
				}
				wechath5.getWxUrl();
			},
			// 公众号微信登录
			async oaLogin(code) {
				if (!code) return;
				const data = await wechath5.authLogin(code);
				this.loginHandle(data);
			},
			oaAutoLogin() {
				// H5微信登录
				const {
					code
				} = this.$Route.query;
				this.isWeixin = isWeixinClient();
				if (this.isLogin) {
					// 已经登录 => 首页
					uni.switchTab({
						url: "/pages/index/index",
					});
					return;
				}
				if (code) {
					// 带有code => 登录
					return this.oaLogin(code);
				}
				if (this.isWeixin && this.isOaWxAutoLogin) {
					// 开启自动授权登录
					this.getCodeUrl();
				}
			},
			// app微信登录
			async appLogin() {
				if (!this.isAgree) {
					// this.$toast({ title: "请阅读并同意《服务协议》《隐私协议》" });
					this.showModel = true;

					return;
				}
				uni.login({
					provider: "weixin",
					success: (res) => {
						uni.showLoading({
							title: "登录中...",
							mask: true,
						});
						const {
							openid,
							access_token
						} = res.authResult;
						apiAppWxLogin({
								openid,
								access_token,
							})
							.then((res) => {
								this.loginHandle(res);
							})
							.finally((res) => {
								uni.hideLoading();
							});
					},
				});
			},
			// 账号登录
			async loginFun() {
				const {
					account,
					password,
					telephone,
					code,
					loginType
				} = this;
				if (!account) {
					this.$toast({
						title: "请输入手机号",
					});
					return;
				}

				if (this.loginType == 1 && !password) {
					this.$toast({
						title: "请输入密码",
					});
					return;
				}
				if (this.loginType == 2 && !code) {
					this.$toast({
						title: "请输入验证码",
					});
					return;
				}
				if (!this.isAgree) {
					this.showModel = true;
					return;
				}

				apiAccountLogin({
					scene: loginType,
					account,
					password: loginType == 1 ? password : "",
					code: loginType == 2 ? code : "",
				}).then((res) => {
					this.loginHandle(res);
				});
			},
			// 登录结果处理
			async loginHandle(data) {
				this.login(data);
				this.getUser();
				// 更新购物车
				this.$store.dispatch("getCartNum");
				uni.hideLoading();
				if (this.isBindMobile && !data.mobile) {
					return this.$Router.replace("/pages/bind_mobile/bind_mobile");
				}
				this.goBack();
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					this.$Router.back(1, {
						success: () => {
							const {
								onLoad,
								options
							} = currentPage();
							// 刷新上一个页面
							onLoad && onLoad(options);
						},
					});
				} else if (Cache.get(BACK_URL)) {
					this.$Router.replace(Cache.get(BACK_URL));
				} else {
					this.$Router.replaceAll("/pages/index/index");
				}
				Cache.remove(BACK_URL);
			},
			changeLoginType() {
				if (this.loginType == loginType.ACCOUNT) {
					this.loginType = loginType.SMS_CODE;
				} else if (this.loginType == loginType.SMS_CODE) {
					this.loginType = loginType.ACCOUNT;
				}
			},
			// 发送验证码
			async sendSMS() {
				if (!this.$refs.uCode.canGetCode) return;
				if (!this.account) {
					this.$toast({
						title: "请输入手机号",
					});
					return;
				}
				try {
					/**
					 * @descriptionp 检测手机号是否已经注册
					 */
					const {
						has
					} = await apiCheckMobile({
						mobile: this.account
					});
					if (has === 0) {
						return this.$toast({
							title: "手机号未注册",
						});
					}
					apiLoginCaptcha({
							mobile: this.account,
						})
						.then((res) => {
							this.$refs.uCode.start();
						})
						.catch((err) => {
							console.log(err);
						});
				} catch (error) {
					console.log(error);
				}
			},

			codeChange(tip) {
				this.codeTips = tip;
			},
			// 头条小程序登录
			async ttLogin() {
				const code = await getCode();
				const [err, res] = await uni.getUserInfo();
				if (!res) {
					this.openSetting();
					return;
				}
				const {
					avatarUrl,
					nickName
				} = res.userInfo;
				uni.showLoading({
					title: "登录中...",
				});

				apiToutiaoAuthLogin({
						code,
						avatarUrl,
						nickName,
					})
					.then((res) => {
						this.loginHandle(res);
					})
					.catch((res) => {
						console.log(res);
						uni.hideLoading();
					});
			},
			openSetting() {
				uni.showModal({
					title: "温馨提示",
					content: "您已拒绝授权，是否前往设置打开个人信息授权？",
					confirmColor: this.themeColor,
					success(res) {
						if (res.confirm) {
							uni.openSetting();
						}
					},
				});
			},
			async handleSubmitInfo(e) {
				const loginData = this.loginData;
				const res = await apiUpdateUser(e, loginData.token);
				this.loginHandle(loginData);
			},
			closePopup() {
				this.showLoginPop = false;
			},
		},
		computed: {
			// 开启手机号注册
			isPhoneRegister() {
				const {
					register_way
				} = this.appConfig;
				if (!register_way) {
					return false;
				}
				return register_way.some((item) => item == 1);
			},
			// 开启强制绑定手机号
			isBindMobile() {
				const {
					coerce_mobile
				} = this.appConfig;
				return coerce_mobile;
			},
			// 登录方式数组
			loginWay() {
				const {
					login_way
				} = this.appConfig;
				if (!login_way) return false;
				this.loginType = login_way[0] || "";
				return login_way;
			},
			// 是否包含对应的登录方式
			hasLoginWay() {
				return (type) => {
					return this.loginWay && this.loginWay.some((item) => item == type);
				};
			},
			// 开启小程序微信授权
			isMnpWxAuth() {
				const {
					mnp_wechat_auth
				} = this.appConfig;
				return mnp_wechat_auth;
			},

			// 开启小程序微信授权
			isOaWxAuth() {
				const {
					h5_wechat_auth
				} = this.appConfig;
				return h5_wechat_auth;
			},
			// 开启app微信授权
			isAPPWxAuth() {
				const {
					app_wechat_auth
				} = this.appConfig;
				return app_wechat_auth;
			},
			// 开启公众号微信自动登录
			isOaWxAutoLogin() {
				const {
					h5_auto_wechat_auth
				} = this.appConfig;
				return h5_auto_wechat_auth;
			},
			// 开启小程序头条登录
			isToutiaoAuth() {
				const {
					toutiao_auth
				} = this.appConfig;
				return toutiao_auth;
			},
			//登录按钮禁用样式
			isDisabled() {
				if (this.account.length == 11 && this.password && this.loginType == 1) {
					return false;
				} else if (
					this.account.length == 11 &&
					this.code &&
					this.loginType == 2
				) {
					return false;
				} else {
					return true;
				}
			},
		},
		onLoad() {
			this.getPolicyAgreement();
			this.mnpLogin = trottle(this.mnpLogin);
			this.appLogin = trottle(this.appLogin);
			this.getCodeUrl = trottle(this.getCodeUrl);
			this.ttLogin = trottle(this.ttLogin);
			// #ifdef H5
			this.oaAutoLogin();
			// #endif
		},
		onUnload() {},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
		padding-bottom: 0;
		background-image: url();
	}

	.login {
		padding: 60rpx;

		padding-top: 80rpx;

		&-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.logo {
			height: 260rpx;
			width: 260rpx;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}

		.login-btn {
			margin-top: 40rpx;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			border-radius: 12rpx;

			&-user {
				@include background_color();
			}

			&-mobile {
				background: white;
				color: black;
				border: 1px solid #bbb;
			}
		}

		.input {
			border: 1px solid #d7d7d7;
			height: 100rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
		}

		.forget-btn {
			border-left: $-solid-border;
		}

		.sms-btn {
			text-align: center;
			border-left: $-solid-border;
			@include font_color();
		}
	}

	.comfirm-box {
		text-align: center;
		padding: 60rpx 0 70rpx 0;
	}

	.agreement {
		@include font_color;
	}

	.disabled {
		opacity: 0.5;
	}
</style>